<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/>-->
    <!-- <router-link to="/index" tag="button">index--axios</router-link> -->

    <mt-tabbar v-model="selected">
      <mt-tab-item id="外卖" @click.native="clicktab(1)">
        <img slot="icon" src="@/assets/logo.png" />
        外卖
      </mt-tab-item>
      <mt-tab-item id="订单" @click.native="clicktab(2)">
        <img slot="icon" src="@/assets/logo.png" />
        订单
      </mt-tab-item>
      <mt-tab-item id="发现">
        <img slot="icon" src="@/assets/logo.png" />
        发现
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="@/assets/logo.png" />
        我的
      </mt-tab-item>
    </mt-tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "外卖"
    };
  },
  methods:{
    clicktab(str){
      switch(str){
        case 1:
            this.$router.push({name:'Index'})
            break;
        case 2:
            this.$router.push({path:'/hello'})
            break;
      }
      
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
